fix: show error state with retry when video conference block fails to load by KumarHarshit3603 · Pull Request #38828 · RocketChat/Rocket.Chat

KumarHarshit3603 · 2026-02-20T00:01:15Z

Proposed changes

When the video conference block failed to load (e.g. network error or API failure), the component only showed a loading skeleton with no way to recover. This PR adds a proper error state with a retry action.

Issue

Where: packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx
What: On result.isError, the component returned the same <VideoConfMessageSkeleton /> as for loading (result.isPending), so users saw an endless skeleton with no explanation or retry.
Why it matters: Users could not tell that something went wrong or try again without refreshing or leaving the view.

Changes

Separate loading and error handling
- Loading (result.isPending): Still shows VideoConfMessageSkeleton (unchanged).
- Error (result.isError): Renders an explicit error state instead of the skeleton.
New error state UI
- Reuses the same message shell (VideoConfMessage / VideoConfMessageRow / VideoConfMessageContent) so the block looks consistent with other video conf states.
- Uses Fuselage States:
  - Icon: Warning (danger variant).
  - Title: “Something went wrong” (Something_went_wrong).
  - Subtitle: Error message from the query when available, otherwise the generic “We couldn’t retrieve any data” message.
  - Action: “Retry” button that calls result.refetch() to re-run the request.
Dependencies
- Imports from @rocket.chat/fuselage: Box, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle.

The behavior and layout match the error + retry pattern used elsewhere (e.g. DeviceManagementTable), adapted to the video conference message block.

Issue(s)

Fixes the missing error handling noted by the // TODO: error handling in VideoConferenceBlock.tsx (previously around lines 111–114).

Steps to test or reproduce

Open a room that shows a video conference block (message with a call / “Join”).
Simulate a failure (e.g. disconnect network, or temporarily break /v1/video-conference.info).
Before: Only the loading skeleton is shown, with no way to retry.
After: An error state appears with “Something went wrong”, the error/generic message, and a “Retry” button; clicking “Retry” refetches and, on success, shows the normal block again.
With network/API working, the block should still load and show the skeleton while loading, then the normal content when ready.

Summary by CodeRabbit

Bug Fixes
- Improved error handling for the video conference block: displays a clear, user-friendly error screen with warning icon, title, message (with fallback) and a Retry button to recover from failures. Loading state is preserved via a skeleton while requests are pending, ensuring smoother and more informative user feedback.

dionisio-bot · 2026-02-20T00:01:19Z

Looks like this PR is not ready to merge, because of the following issues:

This PR is missing the 'stat: QA assured' label
This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

changeset-bot · 2026-02-20T00:01:19Z

⚠️ No Changeset found

Latest commit: 2a063de

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2026-02-20T00:01:54Z

No actionable comments were generated in the recent review. 🎉

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b047817 and 46cc6ac.

📒 Files selected for processing (1)

packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: cubic · AI code reviewer

Walkthrough

A single-file change adds explicit error handling UI to the VideoConferenceBlock component, replacing a TODO with a structured error message and retry button. Control flow now checks pending first, then error, and new fuselage UI components are imported to compose the error state.

Changes

Cohort / File(s)	Summary
Error Handling UI `packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx`	Added explicit error state rendering with a warning icon, title, error message (with fallback), and Retry button that calls `result.refetch()`. Adjusted control flow to render skeleton on pending before checking error; added imports for `Box`, `States`, `StatesAction`, `StatesActions`, `StatesIcon`, `StatesSubtitle`, `StatesTitle`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

A carrot click, a retry gleams,
No more TODOs haunting our dreams,
Error lines read clear and spry,
A button hops to try, retry,
The conference block bounds to the sky! 🐰✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title clearly and concisely summarizes the main change: adding error state UI with retry functionality to the video conference block when it fails to load, which directly aligns with the primary objective of the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 2

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a1c210d and b047817.

📒 Files selected for processing (1)

packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx

🧠 Learnings (1)

📚 Learning: 2025-10-28T16:53:42.761Z

Learnt from: ricardogarim
Repo: RocketChat/Rocket.Chat PR: 37205
File: ee/packages/federation-matrix/src/FederationMatrix.ts:296-301
Timestamp: 2025-10-28T16:53:42.761Z
Learning: In the Rocket.Chat federation-matrix integration (ee/packages/federation-matrix/), the createRoom method from rocket.chat/federation-sdk will support a 4-argument signature (userId, roomName, visibility, displayName) in newer versions. Code using this 4-argument call is forward-compatible with planned library updates and should not be flagged as an error.

Applied to files:

packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: cubic · AI code reviewer

🔇 Additional comments (1)

packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx (1)

2-2: LGTM — all new imports are consumed in the error state block.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx`:
- Line 126: The translation key "We_Could_not_retrive_any_data" is misspelled
and must be renamed to "We_Could_not_retrieve_any_data" across locales and code
references; update the key in all language files under
packages/i18n/src/locales/ (replace the misspelled key with the corrected one)
and then update every code reference to the old key (e.g., in
VideoConferenceBlock component StatesSubtitle usage, AccountTokensTable,
DeviceManagementInfoWithData, DeviceManagementTable) to use
"We_Could_not_retrieve_any_data"; after renaming, run the i18n build/extraction
or linting steps and run the app/tests to ensure no missing-key regressions.
- Around line 124-128: The error message access is unsafe because
useVideoConfData returns useQuery without an explicit error type (TError
defaults to unknown); update the hook useVideoConfData to call useQuery with an
Error error type (e.g., useQuery<..., Error>(...)) so result.error is typed as
Error and result.error.message is allowed, or alternatively narrow the error in
the component (VideoConferenceBlock) with a type guard before reading
result.error.message; locate useVideoConfData (the hook that wraps useQuery) and
adjust its generic error type or add a runtime/type-guard in the component
before using StatesSubtitle to render result.error.message.

packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx

cubic-dev-ai

No issues found across 1 file

KumarHarshit3603 and others added 2 commits February 19, 2026 23:51

video-conf fix

5658736

Merge branch 'RocketChat:develop' into video-conf

b047817

coderabbitai bot reviewed Feb 20, 2026

View reviewed changes

packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx Show resolved Hide resolved

packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx Outdated Show resolved Hide resolved

cubic-dev-ai bot reviewed Feb 20, 2026

View reviewed changes

minor fixes

46cc6ac

KevLehman added the valid A valid contribution where maintainers will review based on priority label Feb 24, 2026

KumarHarshit3603 and others added 5 commits February 25, 2026 08:55

Merge branch 'develop' into video-conf

54b2212

Merge branch 'develop' into video-conf

3d1fcdd

Merge branch 'RocketChat:develop' into video-conf

8bc895f

solved minor issues

22ca4f3

solved issues

2a063de

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: show error state with retry when video conference block fails to load#38828

fix: show error state with retry when video conference block fails to load#38828
KumarHarshit3603 wants to merge 8 commits intoRocketChat:developfrom
KumarHarshit3603:video-conf

KumarHarshit3603 commented Feb 20, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

dionisio-bot bot commented Feb 20, 2026

Uh oh!

changeset-bot bot commented Feb 20, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Feb 20, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

KumarHarshit3603 commented Feb 20, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Issue

Changes

Issue(s)

Steps to test or reproduce

Summary by CodeRabbit

Uh oh!

dionisio-bot bot commented Feb 20, 2026

Uh oh!

changeset-bot bot commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitai bot commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

KumarHarshit3603 commented Feb 20, 2026 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Feb 20, 2026 •

edited

Loading

coderabbitai bot commented Feb 20, 2026 •

edited

Loading